<template>
	<view class="content">
		<view class="info-block">
			<view class="personal-item">
				<image :src="info.faceUrl"
					style="width:80rpx;height: 80rpx; border-radius: 50%; background-color: #f5f5f5;margin-right: 30rpx;">
				</image>
				<view class="title-item">
					<view class="name">{{info.userName}}</view>
					<view class="crt-time">{{info.crtTimeText}}</view>
				</view>
			</view>
		</view>
		<view class="info-block">
			<view class="info-item">
				<view class="name-item">
					<view class="name">问题编号</view>
				</view>
				<view class="form-ctrl">{{info.id}}</view>
			</view>
			<view class="info-item1">
				<view class="name-item">
					<view class="name">问题描述</view>
				</view>
				<view class="form-ctr">{{info.content}}</view>
			</view>
			<view class="info-item">
				<view class="name-item">
					<view class="name">地址</view>
				</view>
				<view class="form-ctr2">{{info.address}}</view>
				<image src="../../static/look/position.png" style="width: 28rpx; height: 35rpx;"></image>
			</view>
			<view class="info-item1">
				<view class="name-item">
					<view class="name">详细地址</view>
				</view>
				<view class="form-ctr">{{info.detAddress}}</view>
			</view>
			<view class="info-item1" v-if="info.streetText">
				<view class="name-item">
					<view class="name">街道</view>
				</view>
				<view class="form-ctr">{{info.streetText}}{{info.roadText}}</view>
			</view>
			<view class="info-item">
				<view class="name-item">
					<view class="name">问题类型</view>
				</view>
				<view class="form-ctrl">{{info.questionTypeText}}</view>
			</view>
			<view class="info-item1">
				<view class="name-item">
					<view class="name">问题图片</view>
				</view>
				<view class="upload-item">
					<view v-for="(item,index) in info.picList" class="image-item" :key="index">
						<image :src="item" class="img" mode="aspectFill" @click="previewImg(item)"></image>
					</view>
				</view>
			</view>
			<view class="info-item1" v-if="info.videoList&&info.videoList.length>0">
				<view class="name-item">
					<view class="name">问题视频</view>
				</view>
				<view class="upload-item">
					<video :src="info.videoList[0].url" class="video" enable-play-gesture="true"
						:enable-play-gesture="true" auto-pause-if-navigate="true" auto-pause-if-open-native="true"
						show-center-play-btn="true" show-fullscreen-btn="true" show-play-btn="true" custom-cache="false"
						style="width: 100%;"></video>
				</view>
			</view>
			<!-- <view class="info-item">
				<view class="name-item">
					<view class="name">上传时间</view>
				</view>
				<view class="form-ctrl">{{info.crtTimeText}}</view>
			</view> -->
			<view class="info-item">
				<view class="name-item">
					<view class="name">问题状态</view>
				</view>
				<view class="state" v-if="info.status==0">待处理</view>
				<view class="state3" v-if="info.status==1">立案受理</view>
				<view class="state2" v-if="info.status==2">驳回</view>
				<view class="state1" v-if="info.status==3">结案</view>
			</view>
			<view class="info-item1" style="border: none;">
				<view class="name-item">
					<view class="name">处理结果</view>
				</view>
				<view class="form-ctr" v-if="info.formRemarkModel">
					{{info.formRemarkModel.content}}
				</view>
				<view class="form-ctr" v-else>暂无处理结果</view>
				<view class="upload-item">
					<view v-for="(item,index) in imgList" class="image-item" :key="index">
						<image :src="item" class="img" mode="aspectFill" @click="openImg(item)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFormDetail
	} from '@/api/look.js';
	export default {
		data() {
			return {
				max: 6,
				info: {
					id: '',
					content: '',
					address: '',
					detAddress: '',
					picList: [],
					videoList: [],
					formRemarkModel: {
						content: ''
					},
					userName: '',
					faceUrl: '',
					crtTimeText: '',
					questionTypeText: ''
				},
				imgList: [],
			}
		},
		computed: {

		},
		methods: {
			getDetail(id) {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				getFormDetail({
					id
				}).then(data => {
					uni.hideLoading()
					if (data.picList && data.picList.length > 0) {
						data.picList = data.picList[0].url.split(',');
					}
					this.info = data;
					if (data.formRemarkModel.resultUrl && data.formRemarkModel.resultUrl != '') {
						this.imgList = data.formRemarkModel.resultUrl.split(',')
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			previewImg(current) {
				console.log(current);
				uni.previewImage({
					current,
					urls: this.info.picList
				})
			},
			openImg(current) {
				uni.previewImage({
					current,
					urls: this.imgList
				})
			}
		},
		onLoad(e) {
			this.getDetail(e.id)
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FAFAFA;
	}

	.content {
		padding: 30rpx;
		background: #f5f5f5;
		min-height: 100vh;

		.info-block {
			display: flex;
			flex-direction: column;
			background: #fff;
			border-radius: 30rpx;
			height: auto;
			padding: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 0 10px 0 #dedede;

			.personal-item {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title-item {
					display: flex;
					flex-direction: column;

					.name {
						color: #027BFD;
						font-weight: 600;
						margin-bottom: 20rpx;
					}

					.crt-time {
						color: #999;
						font-size: 26rpx;
					}
				}
			}

			.title {
				color: #027BFD;
				font-size: 44rpx;
				font-family: 宋体;
				font-weight: bold;
			}

			.info-item {
				display: flex;
				flex-direction: row;
				padding: 15rpx 0;
				border-bottom: 1rpx solid #f5f5f5;
				align-items: center;

				.name-item {
					display: flex;
					flex-direction: row;
					line-height: 60rpx;
					width: 170rpx;

					.must {
						color: #FF0000;
					}

					.name {
						font-size: 28rpx;
					}
				}

				.form-ctrl {
					font-size: 28rpx;
					width: calc(100% - 180rpx);
					line-height: 60rpx;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.form-ctr2 {
					font-size: 28rpx;
					width: calc(100% - 180rpx);
					line-height: 60rpx;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #027BFD;
				}

				.state {
					color: #027BFD;
					font-size: 28rpx;
				}

				.state1 {
					color: #47A244;
					font-size: 28rpx;
				}

				.state2 {
					color: #D7080A;
					font-size: 28rpx;
				}

				.state3 {
					color: #FE7526;
					font-size: 28rpx;
				}
			}

			.info-item1 {
				display: flex;
				flex-direction: column;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				.name-item {
					display: flex;
					flex-direction: row;
					height: 60rpx;
					width: 100%;

					.must {
						color: #FF0000;
					}

					.name {
						font-size: 28rpx;
					}
				}

				.upload-item {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;


					.image-item {
						display: flex;
						flex-direction: row;
						margin-right: 10rpx;
						margin-top: 20rpx;
						width: calc((100% - 40rpx) /3);

						.img {
							// width: 200rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}
					}

					.image-item:nth-child(3) {
						margin-right: 0rpx;
					}

					.image-item:nth-child(6) {
						margin-right: 0;
					}
				}

				.tipe {
					color: #999;
					//border-bottom: 1rpx solid #f5f5f5;
					margin: 20rpx 0;
					font-size: 28rpx;
				}
			}

			.info-item:last-child {
				border-bottom: 0;
			}

			.form-ctr {
				font-size: 28rpx;
				text-align: left;
				background: #f5f5f5;
				padding: 30rpx;
				border-radius: 5px;
				word-break: keep-all;
				word-wrap: break-word;
				white-space: pre-line;
			}
		}

		.btn-item {
			display: flex;
			justify-content: center;
			padding: 30rpx;

			.btn {
				background: #027BFD;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 300rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				height: 70rpx;
			}
		}
	}
</style>